<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Context Menu Example</title>
    <style>
      #customMenu {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        padding: 10px;
        z-index: 1000;
      }
      #customMenu a {
        display: block;
        text-decoration: none;
        color: #333;
      }
      #customMenu a:hover {
        background-color: #e9e9e9;
      }
    </style>
  </head>
  <body>
    <div id="content">右击这里</div>
    <div id="customMenu">
      <div style="display: flex">
        <div style="color: red">123</div>
        <div>测试</div>
      </div>
      <a href="#">选项 1</a>
      <a href="#">选项 2</a>
      <a href="#">选项 3</a>
    </div>

    <script>
      document.addEventListener("contextmenu", function (event) {
        event.preventDefault(); // 阻止默认右键菜单

        // 获取自定义菜单元素
        var customMenu = document.getElementById("customMenu");

        // 设置菜单的位置
        customMenu.style.left = event.pageX + "px";
        customMenu.style.top = event.pageY + "px";

        // 显示菜单
        customMenu.style.display = "block";
      });

      document.addEventListener("click", function () {
        // 点击页面其他地方时隐藏自定义菜单
        var customMenu = document.getElementById("customMenu");
        customMenu.style.display = "none";
      });
    </script>
  </body>
</html>
